<html>
<head>
<meta NAME="author" CONTENT="Peter Csizmadia">
<link REL ="stylesheet" TYPE="text/css" HREF="../../../marvinmanuals.css" TITLE="Style">
<title>MarvinView Example - JavaScripting, CGI scripting using buttons and checkboxes</title>
</head>
<body onLoad="links_set_search(location.search)">

<h1>MarvinView Example - JavaScripting, CGI scripting using buttons and checkboxes</h1>

Pressing the <strong>Search</strong> button calls a CGI script.
The <strong>Do it!</strong> button,
the <strong>Yes</strong>/<strong>No</strong> &quot;button-like checkbox&quot;,
the checkbox and the image buttons (the charts) trigger JavaScript expression
evaluations.

<p>
<center>
<script LANGUAGE="JavaScript1.1" SRC="../../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
mview_mayscript = true;
mview_begin("../../..", 480, 400);
mview_param("rows", "3");
mview_param("cols", "2");
mview_param("border", "1");
mview_param("layoutH", ":1:2:L:0:0:L:0:1");
mview_param("paramH", ":L:12b:L:10b");
mview_param("cell0", "|Molecule|Info and\nControls");
mview_param("cell1", "|Molecule|Info and\nControls");
mview_param("layout", ":6:2:"
+"M:0:0:6:1:"
+"L:0:1:1:1:n:n:"
+"B:1:1:1:1:n:h:"
+"B:2:1:1:1:n:h:"
+"C:3:1:1:1:n:h:"
+"C:4:1:1:1:n:"
+"I:5:1:1:1:n");
mview_param("param", ":M:150:150:"
+"L:10:"
+"B:10:search for more molecules like this:_self:"
+"B:10:execute some JavaScript::"
+"C:10:execute something else:"
+"C:10:select molecule");
mview_param("cell2", "|../../../mols-2d/caffeine.csmol"
+"|first| Search |%|example-searchmore2.cgi?mol=first&n=6&cbx=%C"
+"| Do it! ||js:alert('first')"
+"| No | Yes |0|js:alert('No!')|js:alert('Yes!')"
+"|||0|js:alert('First unselected')|js:alert('First selected')"
+"|../../../img/easychart1.gif|js:alert('Chart 1 clicked')|");
mview_param("cell3", "|O[C@H](\C=C\[C@@H](O)C1=CC=CC=C1)C2=CC=CC=C2"
+"|second| Search |%|example-searchmore2.cgi?mol=second&n=6&cbx=%C"
+"| Do it! ||js:alert('second')"
+"| No | Yes |0|js:alert('No!')|js:alert('Yes!')"
+"|||1|js:alert('Second unselected')|js:alert('Second selected')"
+"|../../../img/easychart2.gif|js:alert('Chart 2 clicked')|");
mview_param("cell4", "|Ethane\n"
+"  Marvin  07119915552D\n"
+"\n"
+"  2  1  0  0  0  0  0  0  0  0999 V2000\n"
+"   -0.5625    1.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"
+"   -0.5625    0.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"
+"  1  2  1  0  0  0  0\n"
+"M  END\n"
+"|third| Search |%|example-searchmore2.cgi?mol=third&n=6&cbx=%C"
+"| Do it! ||js:alert('third')"
+"| No | Yes |1|js:alert('No!')|js:alert('Yes!')"
+"|||0|js:alert('Third unselected')|js:alert('Third selected')"
+"|../../../img/easychart3.gif|js:alert('Chart 3 clicked')|");
mview_param("cell5", "|C[C@]12CC[C@@H]3[C@H](CC[C@H]4CC(=O)C(\C[C@]34C)=C\O)[C@@H]1CCC(=O)O2"
+"|fourth| Search |%|example-searchmore2.cgi?mol=fourth&n=6&cbx=%C"
+"| Do it! ||js:alert('fourth')"
+"| No | Yes |0|js:alert('No!')|js:alert('Yes!')"
+"|||1|js:alert('Fourth unselected')|js:alert('Fourth selected')"
+"|../../../img/easychart4.gif|js:alert('Chart 4 clicked')|");
mview_end();
//-->
</script>
</center>

<p>
The first two arguments of a checkbox in a <code>cell</code><em>i</em> parameter
are its labels for the two states (up and down).
Both are empty strings for the &quot;real&quot; checkbox.
The third argument is the initial state: empty string or <code>0</code>
for <em>up</em>, <code>1</code> for <em>down</em>.
The fourth and fifth arguments are the JavaScript expressions evaluated
when checking and unchecking.
The JavaScript expressions begin with <code>js:</code>.

<p>
The molecule name
(&quot;first&quot;, &quot;second&quot;, &quot;third&quot;, or &quot;fourth&quot;),
the number of checkboxes in the applet and the <em>checkbox states</em>
are arguments of the CGI script called when <strong>Search</strong> is pressed.<br>
There are 6 checkboxes; their states are described by the 6 bits of the
hexadecimal number substituted into the string <code>%C</code> in the
CGI script URL.
<p>

<blockquote>
<pre>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot; <strong>SRC</strong>=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;<strong>&gt;</strong><strong>&lt;/script&gt;</strong>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot;<strong>&gt;</strong>
<strong>&lt;!--</strong>
<strong>mview_mayscript</strong> = true;
<strong>mview_begin(</strong>&quot;../../..&quot;<strong>,</strong> 480<strong>,</strong> 400<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.rows">rows</a>&quot;<strong>,</strong> &quot;2&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cols">cols</a>&quot;<strong>,</strong> &quot;2&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.border">border</a>&quot;<strong>,</strong> &quot;1&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.layout">layoutH</a>&quot;<strong>,</strong> &quot;:1:2:L:0:0:L:0:1:&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.param">paramH</a>&quot;<strong>,</strong> &quot;:L:12b:L:10b&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cell">cell0</a>&quot;<strong>,</strong> &quot;|Molecule|Info and\nControls&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell1&quot;<strong>,</strong> &quot;|Molecule|Info and\nControls&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.layout">layout</a>&quot;<strong>,</strong> &quot;:6:2:&quot;
+&quot;M:0:0:6:1:&quot;
+&quot;L:0:1:1:1:n:n:&quot;
+&quot;B:1:1:1:1:n:h:&quot;
+&quot;B:2:1:1:1:n:h:&quot;
+&quot;C:3:1:1:1:n:h:&quot;
+&quot;C:4:1:1:1:n:&quot;
+&quot;I:5:1:1:1:n&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.param">param</a>&quot;<strong>,</strong> &quot;:M:150:150:&quot;
+&quot;L:10:&quot;
+&quot;B:10:search for more molecules like this:_self:&quot;
+&quot;B:10:execute some JavaScript::&quot;
+&quot;C:10:execute something else:&quot;
+&quot;C:10:select molecule&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#advanced.cell">cell2</a>&quot;<strong>,</strong> &quot;|../../../mols-2d/caffeine.csmol&quot;
+&quot;|first| Search |%|example-searchmore2.cgi?mol=first&amp;n=6&amp;cbx=%C&quot;
+&quot;| Do it! ||js:alert('first')&quot;
+&quot;| No | Yes |0|js:alert('No!')|js:alert('Yes!')&quot;
+&quot;|||0|js:alert('First unselected')|js:alert('First selected')&quot;
+&quot;|../../../img/easychart1.gif|js:alert('Chart 1 clicked')|&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell3&quot;<strong>,</strong> &quot;|O[C@H](\C=C\[C@@H](O)C1=CC=CC=C1)C2=CC=CC=C2&quot;
+&quot;|second| Search |%|example-searchmore2.cgi?mol=second&amp;n=6&amp;cbx=%C&quot;
+&quot;| Do it! ||js:alert('second')&quot;
+&quot;| No | Yes |0|js:alert('No!')|js:alert('Yes!')&quot;
+&quot;|||1|js:alert('Second unselected')|js:alert('Second selected')&quot;
+&quot;|../../../img/easychart2.gif|js:alert('Chart 2 clicked')|&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell4&quot;<strong>,</strong> &quot;|Ethane\n&quot;
+&quot;  Marvin  07119915552D\n&quot;
+&quot;\n&quot;
+&quot;  2  1  0  0  0  0  0  0  0  0999 V2000\n&quot;
+&quot;   -0.5625    1.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n&quot;
+&quot;   -0.5625    0.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n&quot;
+&quot;  1  2  1  0  0  0  0\n&quot;
+&quot;M  END\n&quot;
+&quot;|third| Search |%|example-searchmore2.cgi?mol=third&amp;n=6&amp;cbx=%C&quot;
+&quot;| Do it! ||js:alert('third')&quot;
+&quot;| No | Yes |1|js:alert('No!')|js:alert('Yes!')&quot;
+&quot;|||0|js:alert('Third unselected')|js:alert('Third selected')&quot;
+&quot;|../../../img/easychart3.gif|js:alert('Chart 3 clicked')|&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;cell5&quot;<strong>,</strong> &quot;|C[C@]12CC[C@@H]3[C@H](CC[C@H]4CC(=O)C(\C[C@]34C)=C\O)[C@@H]1CCC(=O)O2&quot;
+&quot;|fourth| Search |%|example-searchmore2.cgi?mol=fourth&amp;n=6&amp;cbx=%C&quot;
+&quot;| Do it! ||js:alert('fourth')&quot;
+&quot;| No | Yes |1|js:alert('No!')|js:alert('Yes!')&quot;
+&quot;|||0|js:alert('Fourth unselected')|js:alert('Fourth selected')&quot;
+&quot;|../../../img/easychart4.gif|js:alert('Chart 4 clicked')|&quot;<strong>);</strong>
<strong>mview_end();</strong>
<strong>//--&gt;</strong>
<strong>&lt;/script&gt;</strong>
</pre>
</blockquote>

<center><div class="lenia">&nbsp;</div></center>
<p>
The next example will show you how to <a HREF="configure1.html">change MarvinView settings</a>.

</body>
</html>
